<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="queryInfo" ref="queryInfo" class="demo-form-inline">
        <el-form-item label="学号" prop="profileId" >
          <el-input v-model="queryInfo.profileId" type="text" @clear="getUsersList" maxlength="11" minlength="2" show-word-limit clearable placeholder="学号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="queryInfo.realName" type="text" @clear="getUsersList" maxlength="10" minlength="2" show-word-limit clearable placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="marjor">
          <el-input v-model="queryInfo.marjor" type="text" @clear="getUsersList" maxlength="20" minlength="2" show-word-limit clearable placeholder="专业"></el-input>
        </el-form-item>
        <el-form-item label="所属梯队" prop="group">
          <el-input v-model="queryInfo.group" type="text" @clear="getUsersList" maxlength="15" minlength="2" show-word-limit clearable placeholder="所属梯队"></el-input>
        </el-form-item>
        <el-form-item label="呢称" prop="nickname">
          <el-input v-model="queryInfo.nickname" type="text" @clear="getUsersList" maxlength="10" minlength="1" show-word-limit clearable placeholder="呢称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="getUsersList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addDialogVisible = true">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetQuery">重置查询/刷新</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="filterTable" :data="tableData" style="width: 100%" stripe  @selection-change="handleSelectionChange">
        <el-table-column type="index" label="#" width="50"></el-table-column>
        <el-table-column prop="realName" label="姓名 " width="150"></el-table-column>
        <el-table-column prop="nickname" label="呢称" width="200"></el-table-column>
        <el-table-column prop="profileId" label="学号" width="150"></el-table-column>
<!--        <el-table-column prop="marjor" label="专业" width="200"></el-table-column>-->
        <el-table-column prop="group" label="梯队" width="150"></el-table-column>
<!--        <el-table-column prop="phone" label="手机号" width="100"></el-table-column>-->


        <el-table-column label="是否启用" width="100px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enabled"  active-color="#13ce66" inactive-color="#ff4949" @change="enableChanged(scope.row)">

            </el-switch>
          </template>

        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button size="mini" type="info" @click="handleView(scope.row.id)">查看</el-button>
            <el-button size="mini" type="primary" @click="handleCheck(scope.row.id)">审核</el-button>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="55"></el-table-column>
      </el-table>
      <!--底部分页-->
      <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-size="queryInfo.pageSize" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>


    <!--  弹出新增对话框-->
    <el-dialog title="新增活动" :visible.sync="addDialogVisible" width="50%" @close="closeDialog">

      <el-form :model="addForm" :rules="addRules" inline ref="addForm" label-width="100px">

        <el-form-item label="学号" prop="profileId" >
          <el-input v-model.number="addForm.profileId" type="text" maxlength="15" show-word-limit clearable placeholder="学号"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="addForm.realName" type="text" maxlength="10" minlength="2" show-word-limit clearable placeholder="真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model.number="addForm.phone" type="text" maxlength="15" minlength="10" show-word-limit clearable placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="marjor">
          <el-input v-model="addForm.marjor" type="text" maxlength="20" minlength="2" show-word-limit clearable placeholder="专业"></el-input>
        </el-form-item>
        <el-form-item label="所属梯队" prop="group">
          <el-input v-model="addForm.group" type="text"  maxlength="10" minlength="2" show-word-limit clearable placeholder="所属梯队"></el-input>
        </el-form-item>
        <el-form-item label="呢称" prop="nickname">
          <el-input v-model="addForm.nickname" type="text"  maxlength="10" minlength="1" show-word-limit clearable placeholder="呢称"></el-input>
        </el-form-item>



        <el-form-item label="上传头像" prop="addImageList">
          <el-upload action="http://localhost:8088/files/upload"  :auto-upload="false"  :on-remove="handleRemove" :on-error="filesUploadError" :file-list="addImageList" ref="upload1" :on-success="filesUploadSuccess" :limit="1" list-type="picture-card" :on-preview="handlePictureCardPreview">
            <i class="el-icon-plus"></i>
          </el-upload>

          <el-dialog :visible.sync="imageDialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancelAddForm">取 消</el-button>
    <el-button type="primary"  @click="submitForm">确 定</el-button>
  </span>
    </el-dialog>


<!--弹出编辑对话框-->
    <el-dialog title="编辑活动" :visible.sync="editDialogVisible" width="50%" @close="closeEditDialog">

      <el-form :model="editForm" :rules="editRules" inline ref="editForm" label-width="150px">

        <el-form-item label="学号" prop="profileId" >
          <el-input v-model.number="editForm.profileId" type="text" maxlength="15" show-word-limit clearable placeholder="学号"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="editForm.realName" type="text" maxlength="10" minlength="2" show-word-limit clearable placeholder="真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model.number="editForm.phone" type="text" maxlength="15" minlength="10" show-word-limit clearable placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="marjor">
          <el-input v-model="editForm.marjor" type="text" maxlength="20" minlength="2" show-word-limit clearable placeholder="专业"></el-input>
        </el-form-item>
        <el-form-item label="所属梯队" prop="group">
          <el-input v-model="editForm.group" type="text"  maxlength="10" minlength="2" show-word-limit clearable placeholder="所属梯队"></el-input>
        </el-form-item>
        <el-form-item label="呢称" prop="nickname">
          <el-input v-model="editForm.nickname" type="text"  maxlength="10" minlength="1" show-word-limit clearable placeholder="呢称"></el-input>
        </el-form-item>



        <el-form-item label="上传头像" prop="editImageList">
          <el-upload action="http://localhost:8088/files/upload"  :auto-upload="false"  :on-remove="handleEditRemove" :on-error="filesEditUploadError" :file-list="editImageList" ref="upload2" :on-success="filesEditUploadSuccess" :limit="1" list-type="picture-card" :on-preview="handlePictureCardPreview">
            <i class="el-icon-plus"></i>
          </el-upload>

          <el-dialog :visible.sync="imageDialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancelEditAddForm">取 消</el-button>
    <el-button type="primary"  @click="submitEditForm">确 定</el-button>
  </span>
    </el-dialog>

<!--    查看人员信息弹框-->
    <el-dialog title="活动信息" :visible.sync="viewDialogVisible" width="50%">
      <el-descriptions >
        <el-descriptions-item label="学号" >{{viewForm.profileId}}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{viewForm.realName}}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{viewForm.phone}}</el-descriptions-item>
        <el-descriptions-item label="专业">{{viewForm.marjor}}</el-descriptions-item>
        <el-descriptions-item label="所属梯队">{{viewForm.group}}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{viewForm.nickname}}</el-descriptions-item>

        <el-descriptions-item label="头像">
          <el-image style="width: 200px; height: 200px" :src="viewForm.avatarUrl" fit="fill"></el-image>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>



  </div>
</template>


<script>
import axios from "axios";

export default {
  name: 'users',
  data(){
    return {
      queryInfo: {
        profileId: '',//学号
        realName: '',//真名
        marjor: '',//专业
        group:'',//梯队
        nickname:'',//呢称
        pageNum: 1,
        pageSize: 8
      },
      tableData:[],
      addDialogVisible: false,
      editDialogVisible:false,
      imageDialogVisible:false,
      editedSubmit:false,
      viewDialogVisible:false,
      // addedForm:false,//是否已经提交表单
      total:0,
      dialogImageUrl:'',
      addForm:{
        profileId: '',
        realName:'',
        phone:'',
        marjor:'',
        group:'',
        nickname:'',
        avatarUrl:''
      },
      editForm:{
        profileId: '',
        realName:'',
        phone:'',
        marjor:'',
        group:'',
        nickname:'',
        avatarUrl:''
      },
      viewForm:{
        profileId: '',
        realName:'',
        phone:'',
        marjor:'',
        group:'',
        nickname:'',
        avatarUrl:''
      },
      editRules:{
        profileId:[
          { required: true, message: '请输入学号', trigger: 'blur' },
          // { type:'number', message: '请输入数字', trigger: 'blur' },
          // { min: 9, max:15, message: '长度至少9位 ', trigger: 'blur' }
        ],
        realName:[
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '请输入手机号', trigger: 'blur' },
          // { type:'number', message: '请输入数字', trigger: 'blur' },
          // { min: 10, max:15, message: '长度至少10位 ', trigger: 'blur' }
        ],
        marjor:[
          { required: true, message: '请输入专业', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符 ', trigger: 'blur' }
        ],
        group:[
          { required: true, message: '请输入所处梯队', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符 ', trigger: 'blur' }
        ],
        nickname:[
          { required: true, message: '请输入呢称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个数字 ', trigger: 'blur' }
        ]
      },
      addRules:{
        profileId:[
          { required: true, message: '请输入学号', trigger: 'blur' },
          { type:'number', message: '请输入数字', trigger: 'blur' },
          // { min: 9, max:15, message: '长度至少9位 ', trigger: 'blur' }
        ],
        realName:[
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { type:'number', message: '请输入数字', trigger: 'blur' },
          // { min: 10, max:15, message: '长度至少10位 ', trigger: 'blur' }
        ],
        marjor:[
          { required: true, message: '请输入专业', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符 ', trigger: 'blur' }
        ],
        group:[
          { required: true, message: '请输入所处梯队', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符 ', trigger: 'blur' }
        ],
        nickname:[
          { required: true, message: '请输入呢称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个数字 ', trigger: 'blur' }
        ]

      },
      addImageList:[],
      editImageList:[]


    }

  },
  created() {
    this.getUsersList()
  },
  methods:{
    getUsersList(){
      console.log('获取人员列表')
      axios({
        method: 'post',
        url: 'http://localhost:8088/users/getuserlist',
        data: this.queryInfo
      }).then((res)=>{
        if(res.data.ok){
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          console.log(this.tableData)
        }
      })
    },
    //重置查询，刷新页面
    resetQuery(){
      console.log('重置查询')
      this.queryInfo.profileId= ''
      this.queryInfo.realName = ''
      this.queryInfo.marjor = ''
      this.queryInfo.group = ''
      this.queryInfo.nickname = ''
      this.getUsersList()
    },
    //编辑用户按钮
    handleEdit(id){
      axios({
        method: 'get',
        url: `http://localhost:8088/users/${id}`
      }).then((res)=>{
        if(res.data.ok){
          this.editForm = res.data.data
          let imageUrl = {}
          imageUrl.url = res.data.data.avatarUrl
          this.editImageList.push(imageUrl)
          this.editDialogVisible = true
          console.log('获取用户信息成功！')
        }else {
          this.$message.error("获取用户数据失败！")
        }
      })

      console.log('编辑用户')

    },
    //删除用户
    handleDelete(id){
      this.$confirm('此操作将永久删除该人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          method: 'delete',
          url:`http://localhost:8088/users/${id}`
        }).then((res)=>{
          if(res.data.ok){
            this.$message.success("删除成功！")
            console.log('删除成功')
            this.getUsersList()
          }else {
            this.$message.error("删除失败！")
            console.log('删除失败')
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

      console.log('删除用户')
    },
    handleView(id){
      axios({
        method: 'get',
        url: `http://localhost:8088/users/${id}`
      }).then((res)=>{
        if(res.data.ok){
          this.viewForm = res.data.data
          let imageUrl = {}
          imageUrl.url = res.data.data.avatarUrl
          // this.editImageList.push(imageUrl)
          this.viewDialogVisible = true
          console.log('获取用户信息成功！')
        }else {
          this.$message.error("获取用户数据失败！")
        }
      })

      console.log('查看用户信息')
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getUsersList()
    },
    //当复选框选择发生变化时
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //关闭新增对话框
    closeDialog(){
      //清空表单和图片
      this.$refs.addForm.resetFields()
      this.$refs.upload1.clearFiles()
      console.log('关闭新增对话框')
    },
    //关闭编辑对话框
    closeEditDialog(){
      if(this.editedSubmit){
        let url= this.editImageList[0].url
        console.log(url)
        axios({
          method: 'delete',
          url: url
        }).then((res)=>{
          if(!res.data.ok){
            this.$message.error("移除图片失败！")
          }else {
            console.log("移除成功！")
          }
        })
        this.editedSubmit = false
      }

      //清空表单和图片
      this.$refs.editForm.resetFields()
      this.editImageList=[]
      this.getUsersList()
      console.log('关闭编辑对话框')
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imageDialogVisible = true;
    },
    //新增中移除图片
    handleRemove(){
      console.log('移除图片')
    },
    //编辑中移除图片
    handleEditRemove(){
      console.log('移除编辑图片')
    },
    //图片上传成功的钩子函数
    filesUploadSuccess(res){
      this.addForm.avatarUrl = res.data
      //图片上传成功后提交表单
      axios({
        method: 'post',
        url: 'http://localhost:8088/users',
        data: this.addForm
      }).then((res)=>{
        if(res.data.ok){
          this.addDialogVisible = false
          this.$message.success("添加人员成功！")
        }else{
          this.$message.error('添加活动失败！')
        }
      });
      console.log('新增图片上传成功')
    },
    //编辑图片上传成功
    filesEditUploadSuccess(res){
      this.editForm.avatarUrl = res.data
      //图片上传成功后提交表单
      axios({
        method: 'put',
        url: 'http://localhost:8088/users',
        data: this.editForm
      }).then((res)=>{
        if(res.data.ok){
          this.editDialogVisible = false
          this.$message.success("修改人员成功！")
        }else{
          this.$message.error('修改人员失败！')
        }
      });

      console.log('编辑图片上传成功')
    },
    //新增图片上传失败
    filesUploadError(){
      console.log('新增图片上传失败')
      this.$message.error("图片上上传出错，人员添加失败！")
    },
    //编辑图片上传失败
    filesEditUploadError(){
      console.log('编辑图片上传失败')
      this.$message.error("图片上上传出错，人员修改失败！")
    },
    //取消增加表单
    cancelAddForm(){

      this.addDialogVisible = false
      console.log('取消新增按钮')
    },
    cancelEditAddForm(){
      this.editDialogVisible = false
      console.log('取消编辑按钮')
    },
    //确定按钮
    submitForm(){
      console.log('新增确定提交')
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          // this.addedForm = true
          this.$refs.upload1.submit()
        } else {
          alert('请填写完整！')
          return false;
        }
      });
    },
    //编辑确定按钮
    submitEditForm(){
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.editedSubmit = true
          this.$refs.upload2.submit()
        } else {
          alert('请填写完整！')
          return false;
        }
      });
      console.log('编辑确定提交')
    },
    //改变启用状态
    enableChanged(user){
      axios({
        method: 'put',
        url: `http://localhost:8088/users/${user.id}/${user.enabled}`
      }).then((res)=>{
        if(!res.data.ok){
          this.$message.error("修改启用状态失败！")
        }else{
          this.$message.success("修改启用状态成功！")
          console.log("修改启用状态成功！")
        }
      })
    },
    handleCheck(){


      console.log('审核')
    }



  }

}

</script>

<style scoped>


</style>
